{% load comp_filters %}
{% load hash_filters %}
<style type="text/css">
  div.card{
    width:100%px;
    margin-bottom:40px;
  }
  div.card div.top{
    border-left:1px solid #AAA;
    border-right:1px solid #AAA;
    border-bottom:1px solid #AAA;
    height:200px;
    border-top:1px solid #AAA;
    overflow:hidden;
  }
  div.card div.top img{
    width:100%;
  }
  div.card div.mid{
    height:40px;
    overflow:visible;
    float:left;
    width:100%;
    background-color:#6682b5;
  }
  div.card div.bot{
    clear:both;
    height:100px;
    background-color:#6682b5;
  }
  div.card div.icon{
    height:101px;
    width:101px;
    border:1px solid #d5d5e5;
    position:relative;
    top:-85px;
    float:left;
    margin-left:15px;
    padding:5px;
    background-color:white;
    overflow:hidden;
  }
  div.card div.icon .img{
    border:1px solid #EAEAEA;
    width:100px;
    height:100px;
    background-size:100px;
    background:url('/glue/avatar/{{USER_NAME}}/') center center no-repeat;
  }
  div.card div.info{
    padding:5px 5px 5px 25px;
    font-size:12px;
    float:left;
    color:whiteSmoke;
    width:320px;
    background-color:#6898ce;
    height:70px;
  }
  div.card div.info li{
    margin-bottom:3px;
    height:14px;
  }
  div.card div.title{
    float:left;
    color:#EAEAEA;
    font-weight:bold;
    font-size:16px;
    padding:5px 10px 5px 10px; 
    width:170px;
  }
  div.card div.social{
    float:right;
    height:20px;
    margin-right:12px;
    
  }
  div.card .sicon{
    height:50px;
    width:50px;
    display:block;
    float:left;
  }
  div.card div.social .sicon{
    margin:3px 1px 5px 1px;
    position:relative;
    top:-20px;
  }
  div.card .gallery-icon{
    border:2px solid #EAEAEA;
    float:right;
    margin-left:10px;
  }
  div.card .sicon img{
    height:50px;
    width:50px;
  }
  div.card div.gicon{
    height:80px;
    width:100px;
    float:right;
    border:1px solid #6898ce;
    margin:0px 15px 0px 0px;
    overflow:hidden;
  }
  div.card div.gicon img{
    width:100px;
  }
  div.top ul{
    width:210px;
    float:right;
    height: 170px;
    padding:10px 20px 5px 0px;
  }
  div.tab{
    height:22px;
    background-color: #6682B5;
  }
  .spandarkblue{
   height:12px;
   display: block;
   padding: 4px 10px 3px 10px;
   font-size: 12px;
   color: white !important;
   background-color: #6682B5;
   cursor: pointer;
   margin:0px 0px 0px 0px;
  }
</style>
<div class='card'>
<div class='top'>
  {% for item in COMP|hash:"ITEMS"|hash:"icon" %}
    {% with "//icon[@name='background']/@path" as xpath %}
      {% with item|fattr:xpath as path%}
      {% if path %}
      <img src="{{path}}/"></img>
      {% endif %}
      {% endwith %}
    {% endwith %}
  {% endfor %}
  <br style="clear:both"/>
</div>
<div class='mid'>
  <div class='icon'>
    <div class='img'>
    </div>
  </div>
  <div class='title'>
  {{PAGE_NAME}}
  </div>
  <div class='social'>
    <a class='sicon'><img src='/res/icons/mediaicons/png/facebook.png'></img></a>
    <a class='sicon'><img src='/res/icons/mediaicons/png/twitter.png'></img></a>
    <a class='sicon'><img src='/res/icons/mediaicons/png/digg.png'></img></a>
    <a class='sicon'><img src='/res/icons/mediaicons/png/youtube.png'></img></a>
  </div>
</div>
 <div class='bot'>
  <div class='info'>
  <ul>
    <li>type: vegetable garden </li>
    <li>area: 2m * 4m </li>
    <li>position: out door, back yard </li>
    <li>faces: west </li>
  </ul>
  </div>
  <div class='gicon'>
  {% for item in COMP|hash:"ITEMS"|hash:"icon" %}
    {% with "//icon[@name='icon1']/@path" as xpath %}
      {% with item|fattr:xpath as path%}
      {% if path %}
      <img src="{{path}}/"></img>
      {% endif %}
      {% endwith %}
    {% endwith %}
  {% endfor %}
  </div>
  <div class='gicon'>
  {% for item in COMP|hash:"ITEMS"|hash:"icon" %}
    {% with "//icon[@name='icon2']/@path" as xpath %}
      {% with item|fattr:xpath as path%}
      {% if path %}
      <img src="{{path}}/"></img>
      {% endif %}
      {% endwith %}
    {% endwith %}
  {% endfor %}
  </div>

 </div>
 <div class='tab'>
    <a href='/glue/data/{{SERVICE.entity.name}}/icon/' class='spandarkblue' style='float:right;' >change overview image</a>
 </div>
</div>

